<template>
  <!-- 前台 -->
  <section class="index-job">
    <div class="nav-box">
      <div class="title form-tool">
        <div style="font-size:18px;">所有人员排班信息</div>
        <div>
          <el-link :underline="false" @click="switchWindow('job')"><i class="el-icon-circle-plus" style="font-size:20px;"></i></el-link>
        </div>
      </div>
      <div ref="job-el" class="transform_5 item-nr" :style="{height:jobObj.isShow?boxHeight(jobObj):'0'}">
        <table width="100%" style="border:none;border-top:1px solid #eee;">
          <tr>
            <td width="360">
              <el-button-group class="vertical-middle">
                <el-button @click="onJobWeek('up')"> <i class="el-icon-arrow-left"></i><span>上周</span> </el-button>
                <el-button @click="onJobWeek('next')"> <span>下周</span> <i class="el-icon-arrow-right"></i></el-button>
              </el-button-group>
            </td>
            <td style="text-align:center;">
              <h3 v-if="jobObj.weekArray.length>0" style="margin:0;">
                {{jobObj.weekArray[0].intactDateDay}}&nbsp;~&nbsp;{{jobObj.weekArray[6].intactDateDay}}
              </h3>
            </td>
            <td style="text-align:right;" width="360">
              <el-form :inline="true" @submit.native.prevent="onSearchJob(-1)">
                <el-form-item style="margin-bottom:0;">
                  <deptSearch v-model="jobForm.deptId" @change="onChangeDept('job')" style="width:130px;"></deptSearch>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                  <doctorSearch ref="jobDoctorSearch" v-model="jobForm.doctorId" :deptId="jobForm.deptId" style="width:130px;"></doctorSearch>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                  <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
                </el-form-item>
              </el-form>
            </td>
          </tr>
        </table>
        <br>
        <table class="grid-table">
          <thead>
            <tr>
              <th></th>
              <th>人员</th>
              <th v-for="(item,index) in jobObj.weekArray" :key="index" :class="[isToDay(item.intactDateDay)?'cur':'']">
                <div>{{item.week}}</div>
                <div>{{item.dateDay}}</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in jobObj.list" :key="index">
              <td>
                <img v-if="item.head" :src="item.head|imageUrl" alt="" class="head-img" style="width:40px;height:40px;">
                <img v-else src="@/img/unknown-avatar.png" alt="" class="head-img" style="width:40px;height:40px;">
              </td>
              <td style="white-space:nowrap;">
                {{item.trueName}}
              </td>
              <td v-for="(item,index) in item.scheduleDoctors" :key="index" :class="[isToDay(item.dateDay)?'cur':'']">
                {{item.typeTitle}}
              </td>
            </tr>
          </tbody>
        </table>
        <br>
        <pager v-model="jobForm" @change-pagenum="onSearchJob"></pager>
        <br>
      </div>
    </div>
    <br>
    <div class="nav-box">
      <div class="title form-tool">
        <div style="font-size:18px;">所有医生预约信息</div>
        <div>
          <el-link :underline="false" @click="switchWindow('yy')"><i class="el-icon-circle-plus" style="font-size:20px;"></i></el-link>
        </div>
      </div>
      <div ref="yy-el" class="transform_5 item-nr" :style="{height:yyObj.isShow?boxHeight(yyObj):'0'}">
        <table width="100%" style="border:none;border-top:1px solid #eee;">
          <tr>
            <td width="360">
              <el-button-group class="vertical-middle">
                <el-button @click="onyyWeek('up')"> <i class="el-icon-arrow-left"></i><span>上周</span> </el-button>
                <el-button @click="onyyWeek('next')"> <span>下周</span> <i class="el-icon-arrow-right"></i></el-button>
              </el-button-group>
            </td>
            <td style="text-align:center;">
              <h3 v-if="yyObj.weeks.length>0" style="margin:0;">
                {{yyObj.weeks[0].intactDateDay}}&nbsp;~&nbsp;{{yyObj.weeks[6].intactDateDay}}
              </h3>
            </td>
            <td style="text-align:right;" width="360">
              <el-form :inline="true" @submit.native.prevent="getdoctorsRegisterList(-1)">
                <el-form-item style="margin-bottom:0;">
                  <deptSearch v-model="yyForm.deptId" @change="onChangeDept('yy')" style="width:130px;"></deptSearch>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                  <doctorSearch ref="yyDoctorSearch" v-model="yyForm.doctorId" :deptId="yyForm.deptId" style="width:130px;"></doctorSearch>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                  <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
                </el-form-item>
              </el-form>
            </td>
          </tr>
        </table>
        <br>
        <table class="grid-table">
          <thead>
            <tr>
              <th></th>
              <th>人员</th>
              <th v-for="(item,index) in yyObj.weeks" :key="index" :class="[isToDay(item.intactDateDay)?'cur':'']">
                <div>{{item.week}}</div>
                <div>{{item.dateDay}}</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in yyObj.doctorList" :key="index">
              <td>
                <img v-if="item.head" :src="item.head|imageUrl" alt="" class="head-img" style="width:40px;height:40px;">
                <img v-else src="@/img/unknown-avatar.png" alt="" class="head-img" style="width:40px;height:40px;">
              </td>
              <td>
                {{item.trueName}}
              </td>
              <td v-for="(item2,index2) in item.count" :key="index2" :class="[isToDay(yyObj.weeks[index2].intactDateDay)?'cur':'']">
                <span v-if="item2">
                  {{item2}}人
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        <br>
        <pager v-model="yyForm" @change-pagenum="getdoctorsRegisterList"></pager>
        <br>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  components: {
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue")
  },
  computed: {},
  data() {
    return {
      collapseIndex: "0",
      jobForm: {
        hpId: "",
        deptId: "",
        doctorId: "",
        startDate: "",
        type: 1,
        days: 7,
        pageSize: 15,
        pageNum: 1,
        total: 0
      },
      jobObj: {
        list: [],
        weekArray: [],
        isShow: true,
        curDate: new Date(),
        elHeight: "auto"
      },
      //预约
      yyForm: {
        hpId: "",
        deptId: "",
        type: 1,
        doctorId: "",
        startDate: "",
        days: 7,
        pageSize: 15,
        pageNum: 1,
        total: 0,
        status: "1,2,3,5"
      },
      //预约
      yyObj: {
        weeks: [],
        doctorList: [],
        isShow: true,
        curDate: new Date(),
        elHeight: "auto"
      }
    };
  },
  created() {
    let th = this;
    th.jobForm.hpId = th.adminUser.hpId;
    th.yyForm.hpId = th.adminUser.hpId;
    th.onSearchJob();
    th.getdoctorsRegisterList();
  },
  methods: {
    //医生预约上下周切换
    onyyWeek(type) {
      let th = this;
      if (th.yyObj.weeks.length == 0) return;

      let date = new Date(th.yyObj.weeks[0].intactDateDay);
      if (type == "up") {
        date.setDate(date.getDate() - 7);
      } else {
        date.setDate(date.getDate() + 7);
      }
      th.yyForm.startDate = th.$utils.FormatTime("yyyy-MM-dd", date.getTime());
      th.getdoctorsRegisterList();
    },
    //获取医生预约信息
    getdoctorsRegisterList(type) {
      let th = this;
      if (type == -1) {
        th.yyForm.pageNum = 1;
        th.yyForm.total = 0;
        th.yyForm.startDate = "";
      }
      th.$api.getdoctorsRegisterList(th.yyForm).then(res => {
        if (res.executed) {
          th.yyObj.weeks = res.dataBody.daysInfos;
          th.yyObj.doctorList = res.dataBody.doctorRegisterInfos.list;
          th.yyForm.total = res.dataBody.doctorRegisterInfos.total;
          th.$nextTick(function() {
            th.yyObj.elHeight = th.$refs["yy-el"].scrollHeight;
          });
        }
      });
    },
    //排班上下周
    onJobWeek(type) {
      let th = this;
      if (th.jobObj.weekArray.length == 0) return;
      let date = new Date(th.jobObj.weekArray[0].intactDateDay);
      if (type == "up") {
        date.setDate(date.getDate() - 7);
      } else {
        date.setDate(date.getDate() + 7);
      }
      th.jobForm.startDate = th.$utils.FormatTime("yyyy-MM-dd", date.getTime());
      th.onSearchJob();
    },
    //查询排班
    onSearchJob(type) {
      let th = this;
      if (type == -1) {
        th.jobForm.pageNum = 1;
        th.jobForm.total = 0;
        th.jobForm.startDate = "";
      }
      //查询排班
      th.$api.scheduleList(th.jobForm).then(res => {
        if (res.executed) {
          th.jobObj.list = res.dataBody.doctorScheduleInfos.list;
          th.jobObj.weekArray = res.dataBody.daysInfos;
          th.jobForm.total = res.dataBody.doctorScheduleInfos.total;
          th.$nextTick(function() {
            th.jobObj.elHeight = th.$refs["job-el"].scrollHeight;
          });
        }
      });
    },
    //科室改变
    onChangeDept(type) {
      let th = this;
      if (type == "job") {
        th.jobForm.doctorId = "";
        th.$nextTick(function() {
          th.$refs["jobDoctorSearch"].getData();
        });
      } else {
        th.yyForm.doctorId = "";
        th.$nextTick(function() {
          th.$refs["yyDoctorSearch"].getData();
        });
      }
    },
    //窗口切换
    switchWindow(type) {
      let th = this;
      if (type == "job") {
        if (th.jobObj.isShow) {
          th.jobObj.elHeight = th.$refs["job-el"].scrollHeight;
        }
        th.jobObj.isShow = !th.jobObj.isShow;
      } else {
        if (th.yyObj.isShow) {
          th.yyObj.elHeight = th.$refs["yy-el"].scrollHeight;
        }
        th.yyObj.isShow = !th.yyObj.isShow;
      }
    },
    //是否今天
    isToDay(value) {
      let th = this;
      let date = new Date();
      let str = th.$utils.FormatTime("yyyy-MM-dd", date.getTime());
      if (str == value) return true;
      else return false;
    },
    //转换高度
    boxHeight(obj) {
      let th = this;
      if (typeof obj.elHeight == "number") return obj.elHeight + "px";
      else return obj.elHeight;
    }
  }
};
</script>
